<template>
  <div>
    <!--卡片视图区域-->
    <el-card>
      <!--查询条件表单区域-->
      <el-form label-position="left" :inline="true" :model="queryForm">
        <el-form-item label="课程名称" size="small">
          <el-input v-model="queryForm.name" placeholder="课程名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="课程类型" size="small">
          <el-select v-model="queryForm.type" placeholder="课程类型" size="small">
            <el-option label="必修" value="shanghai" size="small"></el-option>
            <el-option label="选修" value="beijing" size="small"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" size="small">查询</el-button>
        <el-button type="success" @click="newCourseFormVisible = true" size="small">开设课程</el-button>
      </el-form>
      <!--表格数据区域-->
      <el-row>
        <el-table :data="teacherCourseList" border stripe>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="courseName" label="课程名称"></el-table-column>
          <!--          <el-table-column prop="courseId" label="课程编号" width="80px"></el-table-column>-->
          <el-table-column prop="startTime" label="开始时间"></el-table-column>
          <el-table-column prop="endTime" label="截止时间"></el-table-column>
          <el-table-column prop="courseType" label="课程类型">
            <template v-slot:default="scope">
              <div v-if="scope.row.courseType === '1'">
                必修
              </div>
              <div v-if="scope.row.courseType === '2'">
                选修
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                <el-button @click="editCourse(scope.row)" type="primary" :disabled="scope.row.canApply === 0"
                           icon="el-icon-edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top"
                          :enterable="false">
                <el-button @click="deleteCourse(scope.row.courseId)" type="danger"
                           icon="el-icon-delete"
                           size="small"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <!--编辑课程对话框-->
    <el-dialog title="编辑课程" :visible.sync="editCourseFormVisible">
      <el-form ref="editCourseForm" :model="editCourseForm">
        <el-form-item prop="courseId" size="small" label="课程编号" label-width="100px">
          <el-input size="small" v-model="editCourseForm.courseId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="courseName" size="small" label="课程名称" label-width="100px">
          <el-input size="small" v-model="editCourseForm.courseName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item size="small" label="课程类型" label-width="100px">
          <el-input size="small" v-model="editCourseForm.courseTypeCN" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="开始日期" label-width="100px">
          <el-date-picker
            v-model="editCourseForm.startTime"
            type="date"
            placeholder="选择开始日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item size="small" label="截止日期" label-width="100px">
          <el-date-picker
            v-model="editCourseForm.endTime"
            type="date"
            placeholder="选择截止日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCourseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditCourse()">确 定</el-button>
      </div>
    </el-dialog>
    <!--新建课程对话框-->
    <el-dialog title="开设课程" :visible.sync="newCourseFormVisible" @close="addCourseClosed">
      <el-form ref="newCourseForm" :model="newCourseForm">
        <el-form-item prop="courseId" size="small" label="选择课程" label-width="100px">
          <el-select v-model="newCourseForm.courseId">
            <el-option
              v-for="item in courseList"
              :key="item.courseId"
              :label="item.courseName"
              :value="item.courseId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="startTime" size="small" label="开始时间" label-width="100px">
          <el-date-picker
            v-model="newCourseForm.startTime"
            type="date"
            placeholder="选择开始时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="endTime" size="small" label="截止时间" label-width="100px">
          <el-date-picker
            v-model="newCourseForm.endTime"
            type="date"
            placeholder="选择截止时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newCourseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查询条件表单
      queryForm: {
        name: '',
        type: '',
        apply: ''
      },
      courseList: [],
      teacherCourseList: [],
      total: 0,
      // 编辑课程表单
      editCourseForm: {
        courseId: '',
        startTime: '',
        endTime: '',
        courseTypeCN: ''
      },
      editCourseFormVisible: false,
      // 添加课程表单
      newCourseForm: {
        courseId: '',
        startTime: '',
        endTime: ''
      },
      newCourseFormVisible: false,
      // 复选框选中对象！
      multipleSelection: [],
      startTime: ''
    }
  },
  created () {
    this.getTeacherCourseList()
    this.getCourseList()
  },
  methods: {
    async getCourseList () {
      const { data: res } = await this.$http.post('/queryCourseList', { courseName: '' })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取课程信息失败')
      // console.log(res.data.courses)
      const courseList = res.data
      this.courseList = courseList.courses
      this.total = courseList.total
      // console.log(courseList)
    },
    addCourse () {
      // console.log(this.newCourseForm)
      this.$refs.newCourseForm.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/addCourseTeacher', this.newCourseForm)
          .catch((error) => {
            console.log(error)
          })
        if (res.status !== 200) {
          this.$message.error('课程开设失败,' + res.data.msg)
        } else {
          this.$message.success('课程开设成功')
          this.newCourseFormVisible = false
          await this.getTeacherCourseList()
        }
      })
    },
    addCourseClosed () {
      this.$refs.newCourseForm.resetFields()
    },
    async deleteCourse (courseId) {
      const flag = await this.$confirm('确认要删除吗？')
      if (flag) {
        console.log(courseId)
        const { data: res } = await this.$http.post('/deleteByTCId', { courseId: courseId })
          .catch((error) => {
            console.log(error)
            this.$message.error('删除课程失败,请检查网络')
          })
        if (res.status === 200) {
          this.$message.success('删除课程成功')
          await this.getTeacherCourseList()
        } else {
          this.$message.error('删除课程失败,请检查网络')
        }
      }
    },
    editCourse (row) {
      this.editCourseFormVisible = true
      // console.log(row)
      this.editCourseForm = row
      if (this.editCourseForm.courseType === '1') {
        this.editCourseForm.courseTypeCN = '必修'
      }
      if (this.editCourseForm.courseType === '2') {
        this.editCourseForm.courseTypeCN = '选修'
      }
    },
    submitEditCourse () {
      // console.log(this.editCourseForm)
      this.$refs.editCourseForm.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/updateTeacherCourseTime', this.editCourseForm)
          .catch((error) => {
            console.log(error)
          })
        if (res.status !== 200) {
          this.$message.error('更新课程失败,' + res.data.msg)
        } else {
          this.$message.success('更新课程成功')
          this.editCourseFormVisible = false
          await this.getTeacherCourseList()
        }
      })
    },
    async getTeacherCourseList () {
      const { data: res } = await this.$http.post('/queryTeacherCourseList')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取课程信息失败')
      // console.log(res.data.data)
      const teacherCourseList = res.data
      this.teacherCourseList = teacherCourseList.data
      this.total = teacherCourseList.total
      // console.log(this.teacherCourseList)
    },
    compareCourseList () {
    }
  }
}
</script>

<style scoped>

</style>
